
<script lang="ts" setup>
import { type PropType,  ref, computed } from "vue";
import { useDark, useECharts } from "@pureadmin/utils";
const chartRef = ref();
const { isDark } = useDark();
const theme = computed(() => (isDark.value ? "dark" : "light"));

const { setOptions } = useECharts(chartRef, {
  theme,
  renderer: "svg"
});
const props = defineProps({
  data: {
    type: Object,
    default: () => []
  },
  color: {
    type: String,
    default: "#41b6ff"
  },
  height: {
    type: Number,
    default: 220
  }
});

const getSeries = () => {
  let res = []
  props.data?.data.forEach(item => {
    console.log("linee",props.data?.data);
    
    res.push({
      data: item.value,
      name: item.name,
      type: "line",
      smooth: true,
      color:item.color,
      lineStyle: {
        shadowOffsetY: 3,
        shadowBlur: 7,
        // shadowColor: props.color
      },
    //   areaStyle: item.areaStyle
    })
  });
  return res
}
const getxAxis = () => {
  let res = []
  props.data?.xAxis.forEach(item => {
    res.push(item)
  })
  return res
}
watch(() => props.data, () => {
  setOptions({
    container: ".line-card",
    tooltip: {
      show: true,
      trigger: 'axis',
    },
    legend: {
      top: 0,
      left: 20,
      icon: "circle",
      itemWidth: 8,
      itemHeight: 8,
      textStyle: {
     fontSize: "0.875rem",
     fontWeight:400,
     fontFamily:'PingFang SC',
      }
    },
    dataZoom: [
      //滑动条
      {
        xAxisIndex: 0, //这里是从X轴的0刻度开始
        show: true, //是否显示滑动条，不影响使用
        type: "inside", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
        startValue: 100, // 从头开始。
        endValue:4, // 一次性展示几个。
      },
    ],
    grid: {
      left: '3%',
      right: '6%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      show: true,
      data: getxAxis()
      
    },
    yAxis: {
      type: 'value'
    },
    series: getSeries()
  });
},  {
    deep: true,
    immediate: true
  });

</script>
<template>
    <div ref="chartRef" style="width: 100%; "  :style="{ height: props.height+'px' }"/>
</template>